<template>
        <div>
                <div class="top">
                        <div class="topp">
                                <div class="top1">
                                        <span>我是樊姑娘</span>
                                        <span>账户设置</span>
                                </div>
                                <div class="top2">
                                        <img src="https://img1.baidu.com/it/u=3622442929,3246643478&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
                                             alt="">
                                </div>
                                <div class="top3">
                                        <span>红包(7张今日到期)</span>
                                        <span>余额(0元)</span>
                                </div>
                                <div class="top4">
                                        <div>常用工具</div>
                                        <div>
                                                <span>我的地址</span>
                                                <span>我的客服</span>
                                                <span @click="toCollect">店铺关注</span>
                                                <span>评价有礼</span>
                                        </div>
                                </div>
                                <div class="top5">
                                        <span>邀好友赚现金</span><span>饿了么服务号</span>
                                </div>
                        </div>
                </div>
        </div>
</template>

<script>
export default {
        methods: {
                toCollect () {
                        this.$router.push('/shoucang');
                }
        }

}
</script>

<style lang="scss" scoped>
.top {
        width: 100%;
        background-color: #f5f5f5;
        > .topp {
                width: 95%;
                margin: auto;
                background-color: white;
                > .top1 {
                        width: 100%;
                        height: 100px;
                        display: flex;
                        justify-content: space-between;
                        line-height: 100px;
                        // margin-top: 15px;
                        > span:nth-child(1) {
                                font-size: 22px;
                                font-weight: bold;
                        }
                        > span:nth-child(2) {
                                width: 75px;
                                height: 30px;
                                border: 1px solid #999;
                                text-align: center;
                                line-height: 30px;
                                margin-top: 40px;
                                border-radius: 20px;
                        }
                }
                > .top2 {
                        width: 100%;
                        // margin-top: 15px;
                        > img {
                                width: 100%;
                                height: 120px;
                        }
                }
                .top3 {
                        width: 100%;
                        height: 150px;
                        display: flex;
                        justify-content: space-around;
                        line-height: 150px;
                        // margin-top: 15px;
                        > span {
                                font-size: 22px;
                                font-weight: bold;
                        }
                }
                > .top4 {
                        div:nth-child(1) {
                                font-size: 22px;
                                font-weight: bold;
                        }
                        div:nth-child(2) {
                                display: flex;
                                justify-content: space-between;
                                margin-top: 20px;
                        }
                }
                .top5 {
                        display: flex;
                        justify-content: space-between;
                        > span {
                                font-size: 22px;
                                font-weight: bold;
                                margin-top: 80px;
                        }
                }
        }
}
</style>